<nz-layout style="height: 100%">
    <nz-header>
        <div class="logo">
            <img [src]="'assets/infinite.svg'" alt="logo">
        </div>

        <div class="title">
            {{ project.name }}
        </div>


        <div class="space">
            <!--临时放这里-->
            <span nz-icon title="折叠菜单" (click)="isCollapsed = !isCollapsed"
                  [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></span>

        </div>

        <ul nz-menu nzTheme="dark" nzMode="horizontal" class="user">
            <li nz-menu-item nzMatchRouter>
                <a routerLink="alarm">
                    <span nz-icon nzType="bell"></span>
                    通知
                </a>
            </li>
            <li nz-submenu [nzTitle]="us.user.name || us.user.id || '无名'" nzIcon="user">
                <ul>
                    <li nz-menu-item nzSelected="false" (click)="handlePassword()">修改密码</li>
                    <li nz-menu-divider></li>
                    <li nz-menu-item nzSelected="false" nzDanger (click)="handleExit()">退出</li>
                </ul>
            </li>
        </ul>

    </nz-header>

    <nz-layout>
        <nz-sider [nzWidth]="isCollapsed ? '50px':'200px'">

            <ul nz-menu nzTheme="dark" nzMode="inline" class="menu" [nzInlineCollapsed]="isCollapsed">

                <ng-container *ngFor="let menu of menus">
                    <li nz-submenu [nzIcon]="menu.icon || 'appstore-add'" [nzTitle]="menu.name" [nzOpen]="menu.open">
                        <ul>
                            <li nz-menu-item *ngFor="let item of menu.items" [nzDisabled]="item.disabled" nzMatchRouter
                                nzMatchRouterExact>
                                @switch (item.type) {
                                    @case ('route') {
                                        <a [routerLink]="item.url" [queryParams]="item.query">{{ item.name }}</a>
                                    }
                                    @case ('web') {
                                        <a routerLink="web" [queryParams]="{url: item.url}">{{ item.name }}</a>
                                    }
                                    @case ('out') {
                                        <a [href]="item.url" target="_blank">{{ item.name }}</a>
                                    }
                                    @default {
                                        <a [routerLink]="item.url" [queryParams]="item.query">{{ item.name }}</a>
                                    }
                                }
                            </li>
                        </ul>
                    </li>
                </ng-container>

            </ul>

        </nz-sider>
        <nz-content class="content">
            <nz-breadcrumb nzAutoGenerate></nz-breadcrumb>
            <router-outlet></router-outlet>
        </nz-content>
    </nz-layout>

</nz-layout>
